<template>
  <el-dialog title="查看" :close-on-click-modal="false" :visible.sync="visible" class="view" center>
    <div>
      <div class="listLi">
        <div class="leftContent">章节名称:</div>
        <div>
          <p>chapterName</p>
        </div>
      </div>
      <div class="listLi">
        <div class="leftContent">章节编号:</div>
        <div>
          <p>{{chapterName}}</p>
        </div>
      </div>
      <div class="listLi">
        <div class="leftContent">章节名称:</div>
        <div>
          <p>{{chapterNo}}</p>
        </div>
      </div>
      <div class="listLi">
        <div class="leftContent">配置播放量:</div>
        <div>
          <p>{{chapterVisit}}</p>
        </div>
      </div>
      <div class="listLi">
        <div class="leftContent">章节音频:</div>
        <div style="width: 400px;">
          <p v-if="!showAudio">未上传</p>
          <p style="width: 400px;overflow-wrap: break-word;">{{sourceInfo.audio_url}}</p>
          <p class="audioSpan" style="overflow: hidden;color:#00f">{{sourceInfo.audio_name}}</p>
          <p><audio v-if="showAudio" :src="sourceInfo.audio_url" controls="controls" id="myaudio"></audio></p>
        </div>
      </div>
       <div class="listLi" v-if="hasVideo==1">
        <div class="leftContent">视频:</div>
        <div style="width: 400px;">
            <p v-if="!showAudio">未上传</p>
            <p class="audioSpan" style="overflow-wrap: break-word;">{{sourceInfo.video_url}}</p>
            <p class="audioSpan" style="overflow: hidden;color:#00f">{{sourceInfo.video_name}}</p>
            <video
              v-if="showVideo"
              :src="sourceInfo.video_url"
              controls="controls"
              id="myvideo"
              style="width:200px;height:200px"
            ></video>
        </div>
      </div>
       <div class="listLi" v-if="hasVideo==1">
        <div class="leftContent">视频封面:</div>
        <div>
          <p>
            <img :src="sourceInfo.cover_url" style="width:60px;height:60px">
          </p>
        </div>
      </div>
       <div class="listLi">
        <div class="leftContent">章节内容:</div>
        <div class="contentImg" style="width: 400px;">
          <div style="max-height:800px;overflow: auto;" v-html="content"></div>
        </div>
      </div>
    </div>
    <span slot="footer" class="dialog-footer">
      <el-button @click="returns()" style="text-align:center">返回</el-button>
    </span>
  </el-dialog>
</template>
<style>
.listLi {
  display: flex;
  margin: 20px 0;
}
.leftContent {
  width: 140px;
  text-align: right;
  margin-right: 25px;
}
.listLi p {
  margin: 0 0 5px 0;
}
.contentImg img{
  width: 100% !important;
}
</style>

<script>
import ueditor from "ueditor";
export default {
  data() {
    return {
      showAudio: false,
      showVideo: false,
      visible: false,
      id: "",
      chapterName: "",
      chapterDesc: "",
      chapterNo: "",
      chapterVisit: "",
      content: "",
      chapterVisitCount: "",
      sourceInfo: {
        audio_url: "",
        audio_name: "",
        video_url: "",
        video_name: "",
        cover_url:'',
      },
      ue: null,
      cueId: `J_ueditorBox_${new Date().getTime()}`,
      ueContent: "",
      hasVideo: ""
    };
  },
  methods: {
    returns() {
      this.visible = false;
      var myAuto = document.getElementById("myaudio");
      if (myAuto) {
        myAuto.pause();
        myAuto.load();
      }
    },
    init(data) {
      console.log(data);
      this.id = data.id || 0;
      this.hasVideo = data.hasVideo;
      this.visible = true;
      this.$nextTick(() => {
        // this.$refs["dataForm"].resetFields();
        // if (this.dataForm.id) {
        this.$http({
          url: this.$http.adornUrl(`/course/bookchapter/see/${this.id}`),
          method: "get",
          params: this.$http.adornParams()
        }).then(({ data }) => {
          if (data && data.code === 0) {
            this.id = data.bookChapter.id;
            this.chapterName = data.bookChapter.chapterName;
            this.chapterDesc = data.bookChapter.chapterDesc;
            this.chapterNo = data.bookChapter.chapterNo;
            this.chapterVisit = data.bookChapter.chapterVisit;
            this.content = data.bookChapter.content;
            this.sourceInfo = data.bookChapter.sourceInfo;
            this.chapterVisitCount = data.bookChapter.chapterVisitCount;
            this.sourceInfo = JSON.parse(this.sourceInfo);
            // 先设置audio的src然后在渲染显示，这样就不会加载失败
            if (this.sourceInfo.audio_url) {
              this.showAudio = true;
            } else {
              this.showAudio = false;
            }
            if (this.sourceInfo.video_url) {
              this.showVideo = true;
            } else {
              this.showVideo = false;
            }
            // this.ue.ready(() => {
            //     this.ue.setDisabled();
            //     this.ue.setContent(this.content)
            // });
          }
        });
        // }
      });
    }
  }
};
</script>
<style scoped>
.audioSpan {
  display: block;
}
</style>
